<template>
  <div style="height:100%">
    <RenderTable :loading="loading" :data="data" :columns="list" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { RenderTable } from '@/components'

@Component({
  name: 'demo-table',
  components: { RenderTable }
})
export default class extends Vue {
  private data: Array<any> = []
  private page: any = { pageNo: 1, pageSize: 10, total: 100 }
  private loading: boolean = false
  private tagType: any = { Y: 'success', N: 'danger' }
  private tagText: any = { Y: 'yes', N: 'no' }

  get list () {
    return [
      {
        prop: 'test1',
        label: '默认',
        hide: !true
      },
      {
        prop: 'test2-1',
        label: '图片1',
        hide: !true,
        type: 'image',
        attrs: { placeholder: '点击查看', isImage: false }
      },
      {
        prop: 'test2-2',
        label: '图片2',
        hide: !true,
        type: 'image',
        attrs: { isImage: true }
      },
      {
        prop: 'test3',
        label: '标签',
        hide: !true,
        type: 'tag',
        attrs: { tagType: this.tagType, tagText: this.tagText }
      },
      {
        prop: 'test4',
        label: '日期',
        hide: !true,
        type: 'date',
        attrs: null
      },
      {
        prop: 'test5',
        label: '链接',
        hide: !true,
        type: 'link',
        attrs: { placeholder: '访问链接' }
      },
      {
        prop: 'test6',
        label: '金钱',
        hide: !true,
        type: 'money',
        attrs: { ratio: 1 }
      },
      {
        prop: 'test7',
        label: '弹出框',
        hide: !true,
        type: 'popover',
        attrs: { placeholder: '按钮' }
      },
      {
        prop: 'test8',
        label: '操作',
        hide: !true,
        type: 'action',
        attrs: {
          width: 145,
          actions: [
            {
              text: '操作1',
              hide: !true,
              event: (row: any) => {
                console.log('操作1: ' + row.test1)
              }
            },
            {
              text: '操作2',
              hide: !true,
              event: (row: any) => {
                console.log('操作2: ' + row['test2-1'])
              }
            },
            {
              text: '操作3',
              hide: (row: any) => row.test3 === 'Y',
              event: (row: any) => {
                console.log('操作3: ' + row.test3)
              }
            },
            {
              text: '操作4',
              hide: !true,
              event: (row: any) => {
                console.log('操作4: ' + row.test4)
              }
            }
          ]
        }
      }
    ]
  }

  created () {
    this.fetchTableData()
  }

  private fetchTableData () {
    this.data = Array.from(new Array(5), (_, i) => ({
      test1: `第${i + 1}条`,
      'test2-1': 'https://gitee.com/logo-black.svg',
      'test2-2': 'https://www.baidu.com/img/bd_logo1.png',
      test3: i % 2 ? 'Y' : 'N',
      test4: i % 2 ? `2019-8-1 ${i}:11:22` : '',
      test5: i % 2 ? 'https://www.baidu.com/' : '',
      test6: i * 2,
      test7: 'https://www.baidu.com/img/bd_logo1.png'
    }))
  }
}
</script>
